<template>
    <div class="page">
      <van-nav-bar title="设置" left-text="返回" left-arrow @click-left="$router.go(-1)"></van-nav-bar>
  
      <van-cell-group class="mt-10">
        <van-cell title="账号ID" :value="phone"></van-cell>
        <van-cell is-link title="登录密码" value="未设置"></van-cell>
        <van-cell is-link title="安全密码" value="未设置"></van-cell>
        <van-cell is-link title="清除缓存" @click="clearCache"></van-cell>
      </van-cell-group>
      <!-- 退出登录 -->
      <div class="logout f16 flex fcc bg-fff fixed w100pc" @click="logout">
        <p class="red">退出登录</p>
      </div>
    </div>
  </template>
  
  <script>
  import { mapActions, mapState } from 'vuex';
  import { Cell, CellGroup, NavBar } from 'vant';
  
  export default {
    components: {
      'van-cell': Cell,
      'van-cell-group': CellGroup,
      'van-nav-bar': NavBar
    },
    computed: {
      ...mapState(['phone']) // 使用 mapState 来访问 Vuex 中的 phone
    },
    methods: {
    logout() {
      // 清除 Vuex 中存储的用户信息
      this.$store.commit('set_phone', null); // 清除手机号
      this.$store.commit('set_token', null); // 清除 Token

      // 跳转到 /my/list 页面
      this.$router.push('/my/center');
    }
  }
  };
  </script>
  
  <style lang="less" scoped>
  .logout {
    bottom: 0;
    height: 50px;
    color: #c03131;
  }
  .mt-10 {
    margin-top: 10px;
  }
  .fixed {
    position: fixed;
  }
  .w100pc {
    width: 100%;
  }
  .flex {
    display: flex;
  }
  .fcc {
    justify-content: center;
    align-items: center;
  }
  .red {
    color: #c03131;
  }
  </style>